import { defineComponent, watch, shallowReactive,ref } from 'vue'
import * as echarts from 'echarts'

// 声明类型
const PropsType = {
  tips: {
    type: Number,
    default: 50,
    require: true
  },
  colorObj: {
    type: Object,
    default: () => ({
      textStyle: "#fff",
      series: {
        color: ["#00bcd44a", "transparent"],
        dataColor: {
          normal: "#03a9f4",
          shadowColor: "#97e2f5"
        }
      }
    })
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    const chartRef = ref()
    // 配置项
    let options = shallowReactive({title:null,series:null,color:null,legend:null,radar:null})

    watch(
      () => props.tips,
      (val: any) => {
        options = {
            title: {
                text: ''
              },
              legend: {
               show:false,
              },
              color:[],
              radar: {
                // shape: 'circle',
                indicator: [
                  { name: '氮', max: 6500 },
                  { name: '速效钾', max: 16000 },
                  { name: '有效钾', max: 30000 },
                  { name: '有机质', max: 38000 },
                  { name: 'ph', max: 52000 },
               
                ]
              },
              series: [
                {
                  name: 'Budget vs spending',
                  type: 'radar',
                  data: [
                    {
                      value: [4200, 3000, 20000, 35000, 50000, 18000],
                      name: 'Allocated Budget'
                    },
                    
                  ]
                }
              ]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "200px"
      const width = "200px"

      return <div>
        <echart ref={chartRef} class="mr-auto" options={options} height={height} width={width} />
      </div>
    }
  }
})

